<template>
  <div class="progress-table-box">
   <div class="table-box">
     <div class="progress-table-mian">
       <div class="progress-table-title">
         <div class="table-title-name">重要工程进度</div>
       </div>
       <div class="progress-table-header">
         <engine-center-card v-for="(item, index) in engineList" :key="index" :obj="item" :show="false"></engine-center-card>
       </div>
       <!--<el-table :data="projectData"-->
       <!--class="progress-table-header"-->
       <!--:header-cell-style="headerStyle"-->
       <!--:cell-style="cellStyle"-->
       <!--&gt;-->
       <!--<el-table-column prop="name" label="项目名称">-->
       <!--</el-table-column>-->
       <!--<el-table-column prop="type" label="项目类型">-->
       <!--</el-table-column>-->
       <!--<el-table-column prop="schedule" label="项目进度">-->
       <!--</el-table-column>-->
       <!--<el-table-column prop="startDate" label="开始时间">-->
       <!--</el-table-column>-->
       <!--<el-table-column prop="cycle" label="项目周期">-->
       <!--</el-table-column>-->
       <!--<el-table-column prop="unit" label="施工单位">-->
       <!--</el-table-column>-->
       <!--</el-table>-->
       <!--<div class="pagination-warpper">-->
       <!--<el-pagination-->
       <!--class="pagination"-->
       <!--background-->
       <!--layout="prev, pager, next"-->
       <!--:total="10">-->
       <!--</el-pagination>-->
       <!--</div>-->
       <footer class="more-info">
         <button class="more-info-btn" @click="loadMoreData">查看更多</button>
       </footer>
     </div>
   </div>
  </div>

</template>

<script>
  import EngineCenterCard from "../engine/EngineCenterCard";
  import {mapActions} from 'vuex';
  import projectApi from "@/api/project"
  export default {
    name: "ProjectProgree",
    components: {EngineCenterCard},
    data() {
      return {
        engineList: [],
        projectData: [{
            name: '港口疏浚工程',
            type: '疏浚工程',
            schedule: '待施工',
            startDate: '2021-09-01',
            cycle: '3个月',
            unit: 'XXX公司'
          },
          {
            name: '港口疏浚工程',
            type: '疏浚工程',
            schedule: '待施工',
            startDate: '2021-09-01',
            cycle: '3个月',
            unit: 'XXX公司'
          },
          {
            name: '港口疏浚工程',
            type: '疏浚工程',
            schedule: '待施工',
            startDate: '2021-09-01',
            cycle: '3个月',
            unit: 'XXX公司'
          },
          {
            name: '港口疏浚工程',
            type: '疏浚工程',
            schedule: '待施工',
            startDate: '2021-09-01',
            cycle: '3个月',
            unit: 'XXX公司'
          },
          {
            name: '港口疏浚工程',
            type: '疏浚工程',
            schedule: '待施工',
            startDate: '2021-09-01',
            cycle: '3个月',
            unit: 'XXX公司'
          },
          {
            name: '港口疏浚工程',
            type: '疏浚工程',
            schedule: '待施工',
            startDate: '2021-09-01',
            cycle: '3个月',
            unit: 'XXX公司'
          },
          {
            name: '港口疏浚工程',
            type: '疏浚工程',
            schedule: '待施工',
            startDate: '2021-09-01',
            cycle: '3个月',
            unit: 'XXX公司'
          },
          {
            name: '港口疏浚工程',
            type: '疏浚工程',
            schedule: '待施工',
            startDate: '2021-09-01',
            cycle: '3个月',
            unit: 'XXX公司'
          },
          {
            name: '港口疏浚工程',
            type: '疏浚工程',
            schedule: '待施工',
            startDate: '2021-09-01',
            cycle: '3个月',
            unit: 'XXX公司'
          },
          {
            name: '港口疏浚工程',
            type: '疏浚工程',
            schedule: '待施工',
            startDate: '2021-09-01',
            cycle: '3个月',
            unit: 'XXX公司'
          },
        ]

      }
    },
    methods: {
      ...mapActions('baseTask', ['updateClickTaskKey']),
      loadMoreData() {
        this.updateClickTaskKey('port-2-engine');
        this.$router.push({
          path: '/engine'
        })
      },
      headerStyle({row,rowIndex}) {
        return 'background: rgb(152 154 156 / 50%); height: 70px; font-size: 20px; color: #333333; text-align: center;'
      },
      cellStyle(){
        return 'text-align: center; height: 60px; font-size: 16px; color: #333333; '
      }
    },
    created() {
      let body = {
        pageNum: 1,
        pageSize: 5,
        filterList: [],
        sortList: [],
        searchKey: null
      }
      projectApi.selectPage(body).then(({data}) => {
        this.loadingData = false;
        if (data.returnCode === 200) {
          this.engineList = data.returnData.pageInfo.list;
        } else {
          this.$Message.warning(data.returnMsg)
        }
      }).catch(error => {
        this.$Notice.error('操作失败!')
      })
    }
  }

</script>

<style lang="less" scoped>
  .more-info{
    margin-top: 30px;
    text-align: center;
    margin-bottom: 62px;
    .more-info-btn{
      width: 162px;
      height: 54px;
      background-color: rgb(23, 125, 220);
      border: none;
      color: #FFFFFF;
      cursor: pointer;
    }
  }
  .progress-table-box {
    background: #a9a9a9;
    padding: 0 0 50px;
    margin-top: 20px;
    width: 100%;

    /deep/ .el-table__row:hover > td{
      background-color: #F5F7FA !important;
    }

    .table-box {
      width: 1200px;
      margin: 0 auto;
    }
    .progress-table-mian {
      padding-top: 20px;
    }

    .progress-table-title {
      width: 100%;
      height: 70px;
      /*background: url('../../../assets/images/title.png') no-repeat;*/
      background-size: contain;
      margin: 0 auto;

      .table-title-name {
        font-size: 30px;
        color: #FFFFFF;
        line-height: 70px;
        text-align: center;
      }
    }

    .progress-table-header {
      margin: 0 auto;
      /*width: 62.5%;*/
      /*border: 6px solid #7c97c5;*/
    }
    .pagination-warpper{
      text-align: center;
      margin-top: 62px;
      .pagination{
        /deep/ button, /deep/ .number, /deep/ .more{
          background: transparent;
          border-radius: 2px;
          border: 1px solid rgba(255, 255, 255,.2);
          width: 32px;
          height: 32px;
          box-sizing: border-box;
          margin: 0 4px;
          font-size: 14px;
          color: #FFFFFF;
          transition: all 1s;
          line-height: 32px;
          &.active{
            background: #177DDC;
          }
          &:hover{
            border: 1px solid rgba(253, 253, 253, 0.623);
            color: #FFFFFF;
          }
          &[disabled="disabled"]{
            color: #727272;
          }
        }
      }
    }
  }
</style>
